<!--
 * @Author: wangyuyong
 * @Date: 2020-07-19 10:54:15
 * @LastEditTime: 2020-07-22 11:40:25
 * @FilePath: /blog-manager/src/views/Login.vue
 * @Description: 
-->
<template>
  <div class="container">
    <div class="login-card">
      <div class="head">登录</div>
      <el-input placeholder="用户名" v-model="username">
        <img src="../assets/image/ic_username.png" slot="prefix" />
      </el-input>
      <el-input placeholder="密码" type="password" v-model="password">
        <img src="../assets/image/ic_password.png" slot="prefix" />
      </el-input>
      <el-button type="primary" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
import Constant from "@/common/Constant";

export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      // TODO 判断输入是否合法
      this.$http
        .post("/doLogin", {
          username: this.username,
          password: this.password
        })
        .then(value => {
          console.log(value.headers["authorization"]);
          if (value.status == 200) {
            if (value.data != null) {
              if (value.data.code == 0) {
                // 登录成功
                // 保存token
                localStorage.setItem(
                  Constant.TOKEN,
                  value.headers["authorization"]
                );
                // 跳转页面
                this.$router.push("/home");
              } else {
                alert(value.data.msg);
              }
            }
          } else {
            alert("网络异常");
          }
          console.log(value);
        });
    }
  }
};
</script>

<style scoped>
.container {
  height: 100vh;
  width: 100vw;
  padding-top: 10%;
  background-image: url("../assets/image/bg.jpg");
  background-size: 100%, 100%;
  background-repeat: no-repeat;
}
.login-card {
  border-radius: 5px;
  height: 430px;
  width: 360px;
  background-color: white;
  margin: auto;
  text-align: center;
}
.head {
  height: 150px;
  line-height: 150px;
  text-align: center;
  font-size: 2em;
}
.el-input {
  width: 300px;
  margin-top: 20px;
  border-radius: 5px;
}

img {
  margin-top: 9px;
  width: 20px;
  height: 20px;
}

.el-button {
  width: 300px;
  margin-top: 40px;
}
</style>
